<script lang="ts" setup>
import { ref } from 'vue'
import { useFetch } from '@/home/hooks/fetch';
import RecommendArticle from './RecommendArticle.vue'
import RecommendRepository from './RecommendRepository.vue'
import RecommendOrganization from './RecommendOrganization.vue'
import InfiniteScroll from '@/home/components/InfiniteScroll.vue';

const { $fetch } = useFetch();
const listing = ref<Record<string, any>>([]);

let page = 1;
const loading = ref(false);
const finished = ref(false);

// 加载更多数据
const loadMoreData = async () => {
  if (finished.value) {
    return;
  }

  const { isSuccess, data } = await $fetch('/information/v2/recommend_list', {
    method: 'get',
    data: {
      num: page,
      size: 10,
    },
  });

  if (isSuccess && data?.length) {
    page++;
    listing.value.push(...data);
  }
  else {
    finished.value = true;
  }

  loading.value = false;
}
</script>

<template>
  <section class="page-home-recommend">
    <InfiniteScroll v-model:loading="loading" :finished="finished" @load="loadMoreData">
      <li v-for="(item, index) in listing" :key="index">
        <template v-if="item.resourceType === 'information'">
          <RecommendArticle :data="item" />
        </template>
        <template v-else-if="item.resourceType === 'warehouse'">
          <RecommendRepository :data="item" />
        </template>
        <template v-else-if="item.resourceType === 'org'">
          <RecommendOrganization :data="item" />
        </template>
      </li>
    </InfiniteScroll>
  </section>
</template>

<style lang="scss" scoped>
</style>
